import IconFont from '@/components/IconFont';
import Style from './index.module.less';

/**
 * @desc: 筛选框：锚点
 */
export const Anchors = ({ items, current, scrollToAnchor, scrollToTop }) => {
  return (
    <div className={Style['anchors-wrap']}>
      <div className={Style['top-item']}>
        <div className={Style['scroll-to-top']} onClick={() => scrollToTop()}>
          <IconFont type={'iconscroll-top'} style={{ fontSize: '16px' }}></IconFont>
          回顶部
        </div>
        <div className={Style['highlight']}>快速查找</div>
      </div>
      {items.map((item, index) => {
        const { name, title } = item;
        const isActive = current === name;

        return (
          <div key={index} className={`${Style['anchor-item']} ${isActive ? Style['active'] : ''}`} onClick={() => scrollToAnchor(name)}>
            <div className={Style['anchor-icon']}>{item.icon}</div>
            {title}
          </div>
        );
      })}
    </div>
  );
};

export default Anchors;
